<template>
	<div class="risk">
		<van-search class="info_search" v-model="value" @search="onSearch" @clear="clearSearch" placeholder="搜索" />
		<van-tabs v-model="active">
			<van-tab title="部门">
				<van-list
					style="margin-top: 10px"
					:finished="finished"
					v-model="loading"
					finished-text="没有更多了"
				>
					<van-cell v-for="(item, index) in list" :key="index">
						<div class="risk_item_radio" @click="submit(item)">
							<div>
								<div class="mb-10">{{ item.OrgName }}</div>
								<div>{{ item.OrgFullName }}</div>
							</div>
						</div>
					</van-cell>
				</van-list>
			</van-tab>
			<van-tab title="员工">
				<van-list
					style="margin-top: 10px"
					:finished="finished"
					v-model="loading"
					finished-text="没有更多了"
				>
					<van-cell v-for="(item, index) in userList" :key="index">
						<div class="risk_item_radio" @click="submit(item)">
							<div>
								<div class="mb-10">{{ item.ChnName }}</div>
								<div>{{ item.OrgFullName }}</div>
							</div>
						</div>
					</van-cell>
				</van-list>
			</van-tab>
		</van-tabs>
	</div>
</template>

<script>
import { getChooseUserList, getChooseOrgList } from '@/api/userUser'
export default {
	data() {
		return {
			active: 0,
			list: [],
			userList: [],
			result: [],
			loading: false,
			finished: false,
			options:[],
			userOptions:[],
			filter: {
				showMyDept: true,
				onlyMyDept: false,
				accounted: true,
			},
			activeNames: ['1'],
			border: false,
			value: '',
			radio: '',
		}
	},
	created() {
		this.getList()
		this.getUserList()
	},
		    	beforeRouteLeave(to, from, next) {
		to.params.id = this.$route.params.id
		next() //继续下一步
	},
	methods: {
		handleChange(ids) {
			this.userlist = []
			ids.map((item) => {
				this.list.map((innerItem) => {
					if (innerItem.UserName == item) {
						this.userlist.push({
							code: innerItem.UserName,
							name: innerItem.ChnName,
						})
					}
				})
			})
		},
		// 回到上页
		submit(item) {
		  this.$router.push({
			// name: "DangerConfirmDetail",
			name:this.$route.params.path,
		    params: { item: item ,key:this.$route.params.key,id: this.$route.params.id},
		  });
		},
		getList() {
			this.loading = true
			getChooseOrgList(this.filter)
				.then((res) => {
					this.loading = false
					this.list = res.data
					this.options = res.data
					this.finished = true
				})
				.catch((err) => {
					this.finished = true
				})
		},
		getUserList() {
			this.loading = true
			getChooseUserList(this.filter)
				.then((res) => {
					this.loading = false
					this.userList = res.data
					this.userOptions = res.data;
					this.finished = true
				})
				.catch((err) => {
					this.finished = true
				})
		},
		// 文件页面
		goFile() {
			// this.$router.push('/CommonInfo/InfoDetail')
		},

    onSearch(keyWord) {
      if(this.active==0){
        if(keyWord) {
        this.list = this.fuzzyQuery(this.options,keyWord, 'OrgFullName')
        }
         
      }else {
        if(keyWord) {
        this.userList = this.fuzzyQuery(this.userOptions,keyWord,'ChnName')
        }
      }
    },

    clearSearch() {
         this.list  = this.options
         this.userList = this.userOptions
    },
   fuzzyQuery(list, keyWord,type) {
    var arr = [];
    list.map(item=>{
      if (item[type].indexOf(keyWord) >= 0) {
        arr.push(item);
      }
    })

    return arr;
  },
	},
}
</script>

<style lang="less" scoped>
.risk {
	height: 100vh;
	background-color: #e8f1f8;

	.info_search {
		padding: 10px;
		border-radius: 5px !important;

		.van-field__control {
			background-color: #ffffff !important;
		}
	}
}

.risk_item_radio {
	width: 100%;
	padding: 10px 20px;
	background-color: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #e8f1f8;
}

.choose_btm {
	display: flex;
	width: 100%;
	justify-content: space-between;
	position: fixed;
	bottom: 0;
	background-color: #fff;
	.choose_cancel {
		padding: 0 10px;
		display: flex;
		align-items: center;
		float: left;
	}
	.choose_confirm {
		float: right;
		border-radius: 0;
	}
}
</style>
